"use client"

import { useMemo, useState } from "react"

export const useInput = ({ type = 'text', name }: { type?: InputType, name: string }) => {
    
    const [state, setState] = useState('');
    const [isCheck, setIsCheck] = useState(false);

    const change = (e: any) => {
        const value = e.target.value;
        setState(value);

        if (name == 'username') {
            setIsCheck(value !== '');
        } else {
            setIsCheck(value.length >= 6);
        }
    };

    const input = useMemo(() =>
        <>
            <label htmlFor={name} style={{ color: (!isCheck &&  name == 'password')? 'red' : 'inherit' }}>{name}</label>
            <input id={name} name={name} type={type}  {...(name == 'password' && { placeholder: '密码不能小于6位' })} onChange={change} value={state} />
            <br />
        </>, [type, name, state]);

    return [state, input, isCheck];
}


export const useInsertInput = ({ type = 'text', name }: { type?: InputType, name: string }) => {
    
    const [state, setState] = useState('');
    const [isCheck, setIsCheck] = useState(false);
  
    const change = (e: any) => {
        const value = e.target.value;
        setState(value);
        setIsCheck(value !== '');
    };

    const input = useMemo(() =>
        <>
            <input id={name} name={name} type={type} onChange={change} value={state} />
            <br />
        </>, [type, name, state]);

    return [state, input, isCheck];
}